@if (images) {
	<ngb-carousel [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
		@for (image of images; track image) {
			<ng-template ngbSlide>
				<div class="picsum-img-wrapper">
					<img [src]="image" alt="Random slide" />
				</div>
				<div class="carousel-caption">
					<h3>No mouse navigation</h3>
					<p>This carousel hides navigation arrows and indicators.</p>
				</div>
			</ng-template>
		}
	</ngb-carousel>
}

<hr />

<div class="btn-group" role="group" aria-label="Carousel toggle controls">
	<button type="button" (click)="showNavigationArrows = !showNavigationArrows" class="btn btn-outline-secondary btn-sm">
		Toggle navigation arrows
	</button>
	<button
		type="button"
		(click)="showNavigationIndicators = !showNavigationIndicators"
		class="btn btn-outline-secondary btn-sm"
	>
		Toggle navigation indicators
	</button>
</div>
